<template>
  <div class="order-view">
    <van-nav-bar title="订单" left-arrow @click-left="$router.back()" />
    <van-tabs v-model="active">
      <van-tab title="全部"> </van-tab>
      <van-tab title="待付款">内容 2</van-tab>
      <van-tab title="待取件">内容 3</van-tab>
      <van-tab title="待配送">内容 4</van-tab>
      <van-tab title="已完成">内容 5</van-tab>
    </van-tabs>

    <div v-for="order in orders" :key="order.orderId" class="order-item">
      <div class="order-header">
        <span> 订单号:{{ order.orderId }}</span>
        <span>￥{{ order.totalAmount }}</span>
      </div>
      <div
        v-for="item in order.items"
        :key="item.productId"
        class="order-product"
      >
        <img :src="item.productImage" alt="" class="product-image" />
        <div class="product-info">
          <p>{{ item.productName }}</p>
          <p>￥{{ item.price }} × {{ item.quantity }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
:deep(.van-nav-bar__content) {
  height: 90px;
  line-height: 90px;
}

:deep(.van-tabs__line) {
  background-color: #00a299;
}

.order-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.order-item {
  width: 90%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.order-product {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
}
</style>